<template>
    <div class="sys-topBtn">
        <div>
            <div class="ulNameBox" v-show="showInput">
                <div class="showInputClose">
                    <span @click=" showInput = false">x</span>
                </div>
                <Title style="margin-top:50px">
                    <slot>
                        <p style="margin-left:20px">
                            {{showInputTitle}}
                        </p>
                    </slot>
                </Title>
                <ul> 
                    
                    <li>
                        <el-input
                        size="mini"
                        v-model="itemCode"
                        placeholder="请输入内容"
                        :disabled= isitemCode
                        ></el-input>
                        <span>图号：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="groupCode"
                        placeholder="请输入内容"
                        :disabled= isgroupCode
                        ></el-input>
                        <span>分组编码：</span>
                    </li>
                    <li>
                        <el-input
                        size="mini"
                        v-model="aoCode"
                        placeholder="请输入内容"
                        :disabled= isgroupCode
                        ></el-input>
                        <span>AO编码: </span>
                    </li>
                    <li>
                    <el-select size="mini"  v-model="isBzj" placeholder="请选择">
                        <el-option
                        v-for="item in isBzjSelect"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" >
                        </el-option>
                        </el-select>
                        <span>是否标准件: </span>
                    </li>
                    <li>
                    <el-select size="mini"  v-model="shop" placeholder="请选择">
                        <el-option
                        v-for="item in shopList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" >
                        </el-option>
                        </el-select>
                        <span>单位: </span>
                    </li>

                    <li>
                        <el-input
                        size="mini"
                        v-model="itemQty"
                        placeholder="请输入内容"
                        :disabled= isitemQty
                        ></el-input>
                        <span>数量：</span>
                    </li>
                </ul>
                <div style="text-align:center">
                    <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
                    <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
                </div>
            </div>
        </div>
        <div style="margin:5px 0">
            <el-button size="mini" type="primary" @click="addInfoBtn">新增</el-button>
            <el-button size="mini" type="primary" @click="changeInfoBtn">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteInfoBtn">删除</el-button>
        </div>
    </div>
</template>
<script>
import { sysBbinMaterialChange,sysBbinMaterialAdd,sysBbinMaterialDelete } from "@/utils/api.js"
import Title from "../../../../../components/TableTitle.vue"
export default {
    name:'SysTopBtn',
    components:{
        Title
    },
    data(){
        return{
            // 操作弹窗
            showInput:false,
            // 弹窗title
            showInputTitle:'',
            // 区分确认按钮功能--新增or修改
            btnValue:'',
            workbinCode:'',
            itemCode:'',
            groupCode:'',
            itemQty:'',
            aoCode:'',
            isBzj:'',
            shop:'',
            workbinName:'',
            msWorkbinRuleId:'',
            // 输入框禁用
            isworkbinCode: false,
            isworkbinName: false,
            isitemCode: false,
            isgroupCode: false,
            isitemQty: false,
            // 修改数据
            changeList:[],
            // 删除数据
            deleteList:[],
            isBzjSelect:[{
                value: "Y",
                label: "是",
            },
            {
                value: "N",
                label: "否",
            }
            ],
            shopList:[{
                value: "143",
                label: "143",
            },
            {
                value: "190",
                label: "190",
            }
            ]
        }
    },
    methods:{
        // 新增按钮
        addInfoBtn(){
            this.showInput = true
            this.showInputTitle = '新增编辑';
            this.btnValue = '确认新增';
            // 清空所有input
            this.workbinCode = '';
            this.itemCode = '';
            this.groupCode = '';
            this.itemQty = '';
            this.workbinName = '' ;
            this.isBzj='';
            this.shop= '';
            this.aoCode='';           
        },
        // 修改按钮
        changeInfoBtn(){
            if(this.changeList.length == 1){
                this.btnValue = '确认修改'
                this.showInputTitle = '修改编辑'
                this.showInput = true
                // this.workbinCode = this.changeList[0].workbinCode;
                this.itemCode = this.changeList[0].itemCode;
                this.groupCode = this.changeList[0].groupCode;
                this.itemQty = this.changeList[0].itemQty;
                this.isBzj=this.changeList[0].isBzj;
                this.shop=this.changeList[0].shop;
                this.aoCode=this.changeList[0].aoCode; 
                // this.workbinName = this.changeList[0].workbinName;
                this.msWorkbinRuleId = this.changeList[0].msWorkbinRuleId
            }else {
                this.$Alert({
                    title: "失败",
                    message: '请勾选一条数据进行修改！',
                    type: "error",
                });
            }
        },
        // 保存按钮 --- 修改保存 ---新增保存
        confirmChangeInfoBtn(){
            if(this.itemCode.includes(' ')||this.aoCode.includes(' ')){
                console.log(this.itemCode+"  "+this.aoCode)
                this.$Alert({ title: "失败", message: "含有非法字符", type: "error", });
            }else{
                let account = sessionStorage.getItem('userName')
                if(this.btnValue == '确认修改'){
                    sysBbinMaterialChange({
                        account:account,
                        msWorkbinRuleId:this.msWorkbinRuleId,
                        itemCode:this.itemCode,
                        aoCode:this.aoCode,
                        isBzj:this.isBzj,
                        shop:this.shop,
                        // workbinCode:this.workbinCode,
                        itemQty:this.itemQty,
                        groupCode:this.groupCode,
                        // workbinName:this.workbinName,
                    }).then((res)=>{
                        console.log('修改',res)
                        if(res.data.retCode == 200){
                            this.$Alert({
                                title: "成功",
                                message: res.data.message,
                                type: "success",
                            });
                            // 关闭弹窗
                            this.showInput = false
                            // 修改成功将数据给Table
                            this.$bus.$emit('sysBbmTableHandle','reTable')
                        }else {
                            this.$Alert({
                                title: "失败",
                                message: res.data.message,
                                type: "error",
                            });
                        }
                        this.$bus.$emit("reloadMaxGroup",null);
                    })
                }else if(this.btnValue == '确认新增'){
                    sysBbinMaterialAdd({
                        account:account,
                        itemCode:this.itemCode,
                        // workbinCode:this.workbinCode,
                        itemQty:this.itemQty,
                        aoCode:this.aoCOde,
                        isBzj:this.isBzj,
                        shop:this.shop,
                        groupCode:this.groupCode,
                        // workbinName:this.workbinName,
                    }).then((res)=>{
                        console.log('新增',res)
                        if(res.data.retCode == 200){
                            this.$Alert({
                                title: "成功",
                                message: res.data.message,
                                type: "success",
                            });
                            // 关闭弹窗
                            this.showInput = false
                            // 新增成功将数据给Table
                            this.$bus.$emit('sysBbmTableHandle','reTable')
                        }else {
                            this.$Alert({
                                title: "失败",
                                message: res.data.message,
                                type: "error",
                            });
                        }
                    })
                }
            }
        },
        // 删除按钮
        deleteInfoBtn(){
           sysBbinMaterialDelete({
                msWorkbinRuleIds:this.deleteList
            }).then((res)=>{
                console.log('删除',res)
                if(res.data.retCode == 200){
                    this.$Alert({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    // 删除成功将数据给Table
                    this.$bus.$emit('sysBbmTableHandle','reTable')
                }else {
                    this.$Alert({
                        title: "失败",
                        message: res.data.message,
                        type: "error",
                    });
                }
            })
        }
    },
    mounted(){
        // 接收勾选的数据信息给 TopBtn-修改按钮-删除按钮
        this.$bus.$on('sysBbMaterialChange',(e)=>{
            console.log("000000000"+e);
            // 修改存储的数据
            this.changeList = e
            // 删除存储的数据
            this.deleteList = []
            for(let i=0;i<e.length;i++){
                this.deleteList.push(e[i].msWorkbinRuleId)
            }
        })
    }
}
</script>
<style scoped>
.sys-topBtn {
    width: 100%;
}
.ulNameBox {
    position: relative;
    width: calc(100% - 200px);
    height: calc(100% - 60px);
    position: absolute;
    top: 60px;
    left: 200px;
    z-index: 99;
    background: white;
}
.showInputClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.ulNameBox ul {
    margin-top: 5px;
    overflow: hidden;
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.el-select {
    width: 120px;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.el-input {
    width: 130px;
}
.confirmBtn {
    display: none;
}
</style>